<template>
  <div class="app-container">
<!--    <YxhyTableQuery :query-params.sync="queryParams" :query-columns="queryColumns" @search="handleQuery" />-->

    <YxhyTableData :columns="columns" :data="tableList" :loading="loading" />

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

    <!-- 添加或修改参数配置对话框 -->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="状态" prop="status">
          <div class="flex ai-center">
            <el-switch v-model="form.status" />
            <p class="ml-10">{{ form.status ? '正常' : '封禁' }}</p>
          </div>
        </el-form-item>
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="form.account" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="form.password" show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="角色标识" prop="role">
          <YxhySelect :value.sync="form.role" :columns="roleColumns" />
        </el-form-item>
        <el-form-item label="昵称" prop="chinese_name">
          <el-input v-model="form.chinese_name" placeholder="请输入昵称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>-->

  </div>
</template>

<script>
import { columnsStatic } from './Ds.js'
import { queryGeneralFeedback, FEEDBACK_TYPE } from '@/api/user/feedback'

export default {
  name: 'FeedbackList',
  data() {
    return {
      // 查询参数
      queryParams: {
        mobile: undefined,
        type: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        placeholder: '请输入用户ID',
        type: 'input',
        param: 'user_id'
      }, {
        label: '',
        placeholder: '请选择反馈类型',
        type: 'select',
        selectOptions: [
          {
            name: '充值未到账',
            value: 1
          }, {
            name: '其它',
            value: 2
          }
        ],
        param: 'type'
      }],
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      loading: false,
      // 表格列
      columns: columnsStatic,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        account: undefined,
        password: undefined,
        status: true,
        role: undefined,
        chinese_name: undefined
      },
      // 表单校验
      rules: {
        account: [
          { required: true, message: '请输入登录账号', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: ['blur', 'change'] }
        ],
        role: [
          { required: true, message: '请输入角色标识', trigger: ['blur', 'change'] }
        ],
        chinese_name: [
          { required: true, message: '请输入昵称', trigger: ['blur', 'change'] }
        ]
      },
      roleColumns: []
    }
  },
  computed: {
    isEdit() {
      return ![undefined, ''].includes(this.form.id)
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await queryGeneralFeedback({
        ...this.queryPage,
        ...this.queryParams
      })
      res.data.forEach(e => {
        e.type_text = FEEDBACK_TYPE[e.type]
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        account: undefined,
        password: undefined,
        status: true,
        role: undefined,
        chinese_name: undefined
      }
      this.resetForm('formRef')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.item-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
  .item-panel {
    width: 32%;
    background-color: #f8f8f8;
    padding: 10px;
    margin-bottom: 20px;
  }
}
.item-box:after{
  content: '';
  width: 30%;
}
</style>
